<template>
  <div class="back" style="width: 100%;height: 100%;background-size: cover;display: flex;flex-direction: column">
    <div style="font-size: 32px;color: gold;margin-top: 16px">
      云南省普通高等学校体育教育专业学生基本功大赛

    </div>
    <div style="width: 100%;flex: 1;display: flex;flex-direction: row;padding: 32px;box-sizing: border-box">
      <div style="width: 320px">

      </div>
      <div id="canvasContainer" style="flex: 1;height: 100%">

      </div>
      <div class="border"
           style="width: 360px;padding:24px 32px;box-sizing: border-box;display: flex;background-size: 100% 100%; /* 背景图片覆盖整个元素 */background-repeat: no-repeat; /* 背景图片不重复 */background-position: center; /* 背景图片居中 */ ">
        <div style="flex: 1;display: flex;flex-direction: column">
          <span style="font-size: 26px;color: #ffeca8;">-人员名单-</span>
          <div style="display: flex;justify-content: space-between;font-size: 22px;color: #ffeca8;"
              >
            <div style="flex: 2;text-align: start">学号</div>
            <div style="flex: 1.5;text-align: start">性别</div>
            <div style="flex: 1.5;text-align: start">姓名</div>
          </div>
          <div style="flex: 1;height: 0px; ">
            <div style="display: flex;justify-content: space-between;font-size: 22px;color: #ffeca8;"
                 v-for="(item,index) in selectStuList">
              <div style="flex: 2;text-align: start">{{ item.xh }}</div>
              <div style="flex: 1.5;text-align: start">{{ item.xb==1?'男':'女' }}</div>
              <div style="flex: 1.5;text-align: start">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex;padding: 8px 16px;justify-content: center">
      <a-button @click="toggle(1)" style="margin-right: 16px">抽取一人</a-button>
      <a-button @click="toggle(2)" style="margin-right: 16px">全部抽取</a-button>
      <a-button @click="stop">停止</a-button>
    </div>
  </div>

  <div>

  </div>
</template>

<script>


export default {
  name: "LotteryPage",
  data() {
    let memberList = [];
    for (let i = 0; i < 1000; i++) {
      memberList.push(
          {
            id: i,
            xb:i%2 + 1,
            xh: 10000 + i,
            name: '测试' + i}
      )
    }
    return {
      canvas: null,
      memberList,
      running: false,
      selectStuList: [],
    }
  },
  mounted() {
    this.createCanvas();
  },
  methods: {
    /*创建并重绘画布*/
    createCanvas() {
      /*创建画布*/
      this.canvas = document.createElement('canvas');
      /*设置好ID*/
      this.canvas.id = 'myCanvas';
      /*设置画布的大小*/
      this.canvas.width = document.getElementById('canvasContainer').offsetWidth;
      /*设置画布的高度*/
      this.canvas.height = document.getElementById('canvasContainer').offsetHeight;
      /*将画布添加到网页渲染*/
      document.getElementById('canvasContainer').appendChild(this.canvas);
      /*设置画布的内部html*/
      this.canvas.innerHTML = this.createHTML();
      /*词云开始绘制*/
      /*第一个参数是画布的dom
      * 第二个参数是 词云的列表dom（ul、li），如果列表是直接插入canvas 的innerhtml则无需指定
      * */
      TagCanvas.Start('myCanvas', '', {
        textColour: "#FFD700",
        initial: this.speed(),
        textHeight: 16,
        zoom: 1.05,
        dragControl: true
      });

    },
    /*词云的旋转速度*/
    speed() {
      return [0.2, 0.08];
    },
    /*创建名单列表*/
    createHTML() {
      /*创建词云列表*/
      var html = ['<ul>'];

      /*遍历存储好的人员名单*/

      let max = this.memberList.length;

      this.memberList.forEach(function (item, index) {
        html.push('<li><a>' + item.name + '</a></li>');
      });

      html.push('</ul>');
      return html.join('');
    },
    toggle(type) {
      if (true) {
        /*加快词云的旋转速度*/
        TagCanvas.SetSpeed('myCanvas', [5, 1]);
        /*进入抽奖的状态*/
        this.running = 1;
      }
    },
    stop() {
      TagCanvas.SetSpeed('myCanvas', this.speed());
      this.lottery(1);
    },
    choosed(stu) {
      let select = false;
      for (let i = 0; i < this.selectStuList.length; i++) {
        if (this.selectStuList[i].id == stu.id) {
          select = true;
        }
      }
      return select;
    },
    lottery(count) {
      let that = this;
      var ret = this.memberList
          .filter(function (m, index) {
            return !that.choosed[m];
          })
          .map(function (m) {
            let ob = Object.assign({
              score: Math.random()
            }, m);
            return ob;
          })
          /*排序*/
          .sort(function (a, b) {
            return a.score - b.score;
          })
          /*截取数组*/
          .slice(0, count)
          /*遍历循环元素*/
          .map(function (m) {
            /*新增一个被抽中的员工*/
            // choosed[m.name] = 1;
            /*重新合并*/
            that.selectStuList.push(m)
            return m;
          });
      return ret;
    }
  }
}
</script>

<style scoped>
.back {
  background-image: url('../../assets/lotterybk.jpg')
}

.border {
  background-image: url('../../assets/border.png')
}
</style>
